import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Form, Input, Space, Card, Table, Tooltip } from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table'

// 引入医院设置发送请求的函数
import { reqHospitalSets } from '@api/hospital/hospitalSet'
import {
  IhospitalSets,
  IhospitalSetItem,
} from '@/api/hospital/hospitalSet/model/hospitalSettypes'

// ColumnsType<IhospitalSetItem> 告诉ts传入到表格中的每一条数据是IhospitalSetItem的类型
const columns: ColumnsType<IhospitalSetItem> = [
  {
    title: '序号', // 决定了这一列标题的名称
    // 如果不写render的情况下,dataIndex决定了这一列要渲染的是数据中的哪个属性的值
    // 如果写了render,则dataIndex,不能决定这一列渲染什么.决定的是render函数的返回值
    // 如果不写dataIndex,则render的第一个形参,就是dataSource中的数据对象, 如果写了dataIndex,则render中的第一个形参就是dataIndex的值所对应的dataSource中的值
    // dataIndex: 'name',
    // key: 'name',
    render: (text, record, index) => {
      // text受dataIndex影响, record永远是dataSource中的数据对象, index永远是下标
      // console.log(text, record, index)
      return index + 1
    },

    width: 80, // 控制这一列的宽度
    align: 'center', // 内容水平居中
  },
  {
    title: '医院名称',
    // dataIndex: 'age',
    dataIndex: 'hosname',
  },
  {
    title: '医院编码',
    dataIndex: 'hoscode',
  },
  {
    title: 'api基础路径',
    dataIndex: 'apiUrl',
  },
  {
    title: '签名',
    dataIndex: 'signKey',
  },
  {
    title: '联系人名称',
    dataIndex: 'contactsName',
  },
  {
    title: '联系人手机号',
    dataIndex: 'contactsPhone',
  },
  {
    title: '操作',

    render: (_, record) => (
      <Space size="middle">
        <Tooltip title="编辑医院">
          <Button icon={<EditOutlined />} type="primary"></Button>
        </Tooltip>
        <Tooltip title={'删除医院'}>
          <Button icon={<DeleteOutlined />} type="primary" danger></Button>
        </Tooltip>
      </Space>
    ),

    fixed: 'right', //当前列在右侧滚动
    width: 120,
  },
]

let flag = false // 这个flag是用来判断用户是否点击查询按钮的标记,false为未点击.true为已点击

export default function HospitalSet() {
  const navigate = useNavigate()
  // 创建form实例
  const [form] = Form.useForm()
  // 注意: 定义状态时,如果没有给初始数据定义类型,则会自动推论
  // 当我们的数据是基本数据类型时,不需要传入泛型,因为自动推论是正确,但是如果是复杂数据类型,自动推论是错误的(never[]),所以我们需要手动将状态的类型传入
  const [hospitalSets, setHospitalSets] = useState<IhospitalSets>([])

  // 分页相关的状态
  const [total, setTotal] = useState(0) // 数据总数
  const [pageSize, setPageSize] = useState(2) //一页多少条
  const [page, setPage] = useState(1) // 高亮的页码

  // 动态控制表格的加载效果
  const [loading, setLoading] = useState(false)

  // 注意: useEffect的回调函数,不允许定义为异步函数
  useEffect(() => {
    // 组件挂载的时候,发送请求获取医院设置的数据
    getHospitalSets(1, 5)
  }, [])

  // 获取医院设置表格数据的函数
  async function getHospitalSets(page: number, pageSize: number) {
    setLoading(true)

    // 1. 先获取到表单中的医院名称和医院编码的值
    // 1.1 创建一个form实例对象 const [form] = Form.useForm()
    // 1.2 用form实例对象和对应的Form组件进行绑定 在Form组件上添加form属性,值为form实例对象
    // 1.3 调用form实例提供的方法,对Form组件中表单元素进行操作
    const { hosname, hoscode } = form.getFieldsValue()

    //判断,如果用户点击了查询按钮,则添加筛选条件,如果用户没有点击查询按钮,则不添加筛选条件
    let result
    if (flag) {
      result = await reqHospitalSets(page, pageSize, hosname, hoscode)
    } else {
      result = await reqHospitalSets(page, pageSize)
    }

    // console.log(result)
    // 将表格数据存储到状态中
    setLoading(false)
    setHospitalSets(result.records)
    setTotal(result.total)
  }
  // 点击查询之后触发的事件处理函数
  const onFinish = () => {
    // 注意: 一定要先改flag=true,再发请求
    flag = true
    setPage(1)
    // 点击查询按钮,应该从第一页开始展示数据,并且每一页的数据量不应该发生变化
    getHospitalSets(1, pageSize)
  }

  // 清空按钮的事件处理函数
  const clearFormHandle = () => {
    // 1. 清空表单元素的值
    form.setFieldsValue({ hosname: undefined, hoscode: undefined })
    // 2. 重新发送请求获取表格数据,但是没有筛选条件
    flag = false
    setPage(1)
    getHospitalSets(1, pageSize)
  }

  // const onFinishFailed = (errorInfo: any) => {
  //   console.log('Failed:', errorInfo)
  // }
  return (
    <Card>
      <Form
        // 只要用户在文本框中输入内容,则立刻将flag改为false.这样做的目的是强制用户每次输入完必须重新点击查询按钮
        onValuesChange={() => {
          flag = false
        }}
        // 让form实例和当前Form组件进行绑定
        form={form}
        //  表单中的所有表单元素在一行显示,如果放不下会自动换行
        layout="inline"
        // name="basic"  // 表单的名称
        // antd中内置了栅格系统,一行分成24份
        // labelCol表示表单元素前面的描述文本在一行中的位置 span:2表示占2份
        // labelCol={{ span: 2 }}
        // wrapperCol表示表单元素在一行中的位置 span:16表示占16份
        // wrapperCol={{ span: 16 }}
        // 控制表单在的表单元素的初始值
        // initialValues={{ remember: false }}
        // 点击提交按钮之后,如果有校验规则,则表单中所有表单元素校验都通过了,则onFinish触发.如果没有校验规则,则点击提交按钮之后立即触发
        onFinish={onFinish}
        // 点击提交按钮之后,如果有校验规则,则表单校验不通过时,触发onFinishFailed.如果没有表单校验,则写这个回调没有意义
        // onFinishFailed={onFinishFailed}
        // autoComplete="off"
      >
        <Form.Item
          // label就是对应的表单元素的描述文本
          // label="xxx"
          // 当前表单元素的name
          name="hosname"
          // 当前表单元素的校验规则
          // required: true 表示当前表单元素必填 message是校验不通过的时候的提示文本
          // rules={[{ required: true, message: 'Please input your username!' }]}
        >
          {/* 文本框 */}
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item
          // label="Password"
          name="hoscode"
          // rules={[{ required: true, message: 'Please input your password!' }]}
        >
          {/* 密码框 */}
          {/* <Input.Password /> */}
          <Input placeholder="医院编码" />
        </Form.Item>

        {/* <Form.Item
          name="remember"
          // 声明当前表单元素控制值的属性是什么
          valuePropName="checked"
          // offset: 8 表示当前表单元素偏移8份
          wrapperCol={{ offset: 8, span: 16 }}
        >
          <Checkbox>Remember me</Checkbox>
        </Form.Item> */}

        <Form.Item>
          {/* Space会给包裹的组件,添加间距 */}
          <Space>
            {/* 在一个表单中,如果Button上有htmlType="submit",则当前按钮就是当前表单的提交按钮 */}
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
            <Button type="default" onClick={clearFormHandle}>
              清空
            </Button>
          </Space>
        </Form.Item>
      </Form>
      <Space style={{ marginTop: 20, marginBottom: 20 }}>
        <Button
          type="primary"
          onClick={() => {
            navigate('/syt/hospital/hospitalSet/add')
          }}
        >
          添加
        </Button>
        <Button type="primary" danger>
          批量删除
        </Button>
      </Space>
      {/* 
      
      columns属性决定了表格中有多少列,每一列的标题是什么,以及这一列要渲染什么数据 

      dataSource 决定了表格中要渲染什么数据
      
      scroll 给表格添加滚动条 x表示水平方向,后面的值表示滚动区域

      bordered 给表格添加边框
      */}
      <Table
        loading={loading} // 是否展示正在加载数据的效果
        columns={columns}
        dataSource={hospitalSets}
        scroll={{ x: 1500 }}
        bordered
        // 告诉Table,内部列表渲染时,使用数据对象中的id,作为key值
        rowKey="id"
        // pagination用来控制表格每部的分页器
        pagination={{
          current: page, // 控制分页器中哪个页码高亮
          total, // 告诉分页器,数据总数
          pageSize, //告诉分页器,一页有多少条数据
          showSizeChanger: true, //展示切换分页数据个数的控件
          pageSizeOptions: [2, 5, 10], //自定义切换分页选项
          showQuickJumper: true, //展示快速跳转
          showTotal() {
            // 这个函数的返回值决定了分页器前面展示的文本
            return `总共: ${total}条`
          },
          // 只要点击了分页器的任何一个选项,这个回调就会触发
          onChange(page, pageSize) {
            // page 当前选中的页码
            // pageSize 当前选中的一页多少条
            console.log(page, pageSize)
            //修改状态中记录的一条多少条,写这个是为了让分页选项可以正常渲染
            setPageSize(pageSize)
            setPage(page)
            // 发送请求,重新获取表格数据
            getHospitalSets(page, pageSize)
          },
        }}
      />
    </Card>
  )
}
